<template>
  <div class="home-head">
  	<div class="head-back">
		<span class="iconfont">&#xe600;</span>
  	</div>
  	<div class="head-input">
  		<span class="iconfont search-icon">&#xe632;</span>
  		<input type="text" class="search-input"  name="" placeholder="请输入城市/景点/游玩主题">
  	</div>
  	<router-link to="/city">
  		<div class="head-city">{{this.$store.state.city}}<span class="iconfont">&#xe601;</span></div>
  	</router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data() {
  	return {
  		msg: 'head'
  		// city: '合肥'
  	};
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/var.styl'
@import '~styles/mixin.styl'
	.home-head
		line-height: $headHeight
		display: flex
		background-color: $bgColor
		.head-input
			height: .64rem
			line-height: .64rem
			flex: 1
			margin-top: .12rem
			font-size: 0
			position: relative
			color: #999
			// background-color:#fff
			.search-icon
				position: absolute
				left: .18rem
			input
				flex: 1
				width: 100%
				height: 100%
				line-height: .62rem
				padding-left: .62rem
				font-size: .26rem
				color: #666
				border-radius: 4px
				inputFF()
	.head-back
		width: .76rem
		line-height: .86rem
		text-align: center
		color: #fff
		.iconfont
			font-size: $backIconSize
	.head-city
		min-width: 1.24rem
		max-width: 2rem
		color: #fff
		line-height: .86rem
		text-align: center
		padding: 0 0.05rem
		position: relative
		top: 0.03rem
		.iconfont
			margin-left: .04rem
			font-size: .12rem
</style>
